<template>
	<div class="content">
		<el-form ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
			<el-form-item label="上级菜单" prop="parentId">
			  <el-tree-select v-model="form.parentId"
			  :data="data" check-strictly :render-after-expand="false">
			  </el-tree-select>
			</el-form-item>
			<el-form-item label="菜单类型" prop="menuType">
			  <el-radio-group v-model="form.menuType">
			    <el-radio value="0">目录</el-radio>
			    <el-radio value="1">菜单</el-radio>
				<el-radio value="2">按钮</el-radio>
			  </el-radio-group>
			</el-form-item>
			<el-form-item label="图标" prop="menuIcon"  v-if="form.menuType === '0' | form.menuType === '1'">
			  <IconPicker v-model="form.menuIcon">
			  </IconPicker>
			</el-form-item>
			<el-row gutter="50">
				<el-col span="12">
					<el-form-item label="菜单名称" prop="menuName">
					  <el-input v-model="form.menuName"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="显示排序" prop="sort">
					  <el-input v-model="form.sort" type="number" min="0"/>
					</el-form-item>
				</el-col>
			</el-row>
		    <el-row  gutter="50" style="justify-content: space-between;" v-if="form.menuType === '0' | form.menuType === '1'">
		    	<el-col span="12">
		    		<el-form-item label="是否外链" prop="link">
					   <el-switch v-model="form.link"  active-value="1" inactive-value="0" />
		    		</el-form-item>
		    	</el-col>
		    	<el-col  span="12">
		    		<el-form-item label="路由地址" prop="menuRoute">
		    		  <el-input v-model="form.menuRoute" />
		    		</el-form-item>
		    	</el-col>
		    </el-row>
			<el-row gutter="45">
				<el-col span="12"  v-if="form.menuType === '1'">
					<el-form-item label="组件路径" prop="menuPath">
					  <el-input v-model="form.menuPath"/>
					</el-form-item>
				</el-col>
				<el-col span="12" v-if="form.menuType === '2' | form.menuType === '1'">
					<el-form-item label="权限标识" prop="permissionCode">
					  <el-input v-model="form.permissionCode"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row gutter="50" v-if="form.menuType === '1'">
				<el-col span="12">
					<el-form-item label="路由参数" prop="routeParam">
					  <el-input v-model="form.routeParam"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  gutter="205">
				<el-col  span="12"  v-if="form.menuType === '0' | form.menuType === '1'">
					<el-form-item label="显示状态" prop="showStatus">
					  <el-switch v-model="form.showStatus" active-value="1" inactive-value="0"/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="菜单状态" prop="menuStatus">
					  <el-switch v-model="form.menuStatus"  active-value="1" inactive-value="0"/>
					</el-form-item>
				</el-col>
			</el-row>
		    <el-form-item label="备注" prop="remark">
		      <el-input v-model="form.remark" type="textarea" />
		    </el-form-item>
		    <el-form-item style="margin-top:40px;">
				<el-button style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
				<el-button style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
				<el-button type="info"  @click="close" >取消</el-button>
		    </el-form-item>
		</el-form>
	</div>
	
</template>

<script lang="ts" setup>
	import { onMounted, reactive,ref,watchEffect } from 'vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import  { ElMessage} from 'element-plus'
	import IconPicker from '@/components/IconSelect/index.vue'
	import {save,treelist,info} from '@/api/menu.ts'
	
	const props = defineProps(['parentId'])
	
	const icon = ref<string>('');
	const emit = defineEmits(['closeAddMenuForm','success'])
	const data = ref([{value:0,label:'顶级菜单',children:[]}])
	onMounted(()=>{
		getTree()
	})
	  const getTree=()=>{
	    treelist().then((res)=>{
	      if(res.code === 200){
	        data.value[0].children = res.data
	      }
	    })
	  }
	interface RuleForm {
	  remark:string,
	  parentId:number,
	  menuType:string,
	  menuIcon:string,
	  menuName:string,
	  sort:string,
	  link:string,
	  menuRoute:string,
	  menuPath:string,
	  permissionCode:string,
	  routeParam:string,
	  showStatus:string,
	  menuStatus:string
	}
	const ruleFormRef = ref<FormInstance>()
	const form = reactive<RuleForm>({
	  remark:'',
	  parentId:0,
	  menuType:'0',
	  menuIcon:'',
	  menuName:'',
	  sort:'0',
	  link:'0',
	  menuRoute:'',
	  menuPath:'',
	  permissionCode:'',
	  routeParam:'',
	  showStatus:'1',
	  menuStatus:'1'
	})
	const rules = reactive<FormRules<RuleForm>>({
		menuName:[{required:true,message:'菜单名称不能为空',trigger:'blur'}],
		sort:[{required:true,message:'排序不能为空',trigger:'blur'}],
		menuRoute:[{required:true,message:'路由地址不能为空',trigger:'blur'}],
	})
	
	
	watchEffect(()=>{
		console.log("props.parentId"+props.parentId)
		form.parentId = props.parentId
		getTree()
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const {code}=await save(form)
		  if(code === 200){
			  ElMessage({
				  type:'success',
				  message:'新增成功'
			  })
			  resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
		resetForm(ruleFormRef.value)
		emit('closeAddMenuForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>